<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/* 1.控制字体：font-family指定字体家族属性 */
			{
				/* 免费：微软雅黑、楷体、sans-serif‘无衬线字体’等同于黑体、宋体.. */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑存在字体，按照顺序选择执行，二选一，就近原则 */
				/* font-size字体尺寸属性：px 绝对值--pc em：相对于父元素字体倍数调整--移动端 */
				font-size: 1.5em;
				/* font-weight字体加粗属性  属性值：数值【整数】  100 细~900粗
				                                  英文 normal、bold */
				 font-weight: 900;
				/* font-style字体样式属性 */
				font-style: italic;
				/* text-transform字体转换属性：属性值uppercase 转大写
				                                   lowercase 转小写
												   capitalize 首字母转大写
				*/
				text-transform: uppercase;
				text-transform: lowercase;
				text-transform: capitalize;
				/* text-indent 文本块首行缩进属性：属性值  数值px */
				text-indent: 200px;
			}
			/* 2.控制文本布局 */
			h 1+p{
				border: 1px solid red;
				/* text-align属性：属性值：left/right/center【空间宽度】
				                          justify  两端对齐【文本占满空间】
				                          针对左右布局 */
				text-align: center;
				text-align: justify;
				/* line-height行高属性：属性值：数值px  针对文本行高，文本垂直居中 */
				height:40px;
				line-height: 40px;
				/* 文本垂直居中：高度与行高一致 */
				/* letter-spacing字符间距属性；属性值【正负】 数值px */
				letter-spacing: 10px;
				/* word-spacing单词间距属性：属性值 数值px */
				word-spacing: 10px;
			}
			/* 文本装饰效果 */
			p a{
				border: 1px solid #6d6d6d;
				padding: 6px 10px;
				border-radius: 3px;
				margin-left: 10px;
			}
			/* 默认效果：去边框，去掉下划线 */
			p a.current{
				border: 0;/* 去边框 */
				/* text-decoration超链接效果属性：属性值 none 去掉下划线
				                                underline默认有下划线
												line-through 删除线
				*/
				text-decoration: none;/* 去掉下划线 */
				text-decoration: underline;
				text-decoration: line-through;
				color: #000;
			}
			p>span{
				bord er:1px solid red;
				/* text-shadow文本阴影属性   阴影：①滤镜：下阴影②文本阴影 ③盒子阴影*/
				/* 属性值：XY模糊距离颜色 */
				text-shadow: 5px 5px 5px #ff557f;
				}
				/* 4.文本换行属性 */
				h1~span{
					border: 1px solid red;
					/* white-space文本换行属性：nowrap 一行显示，添加回车，显示效果;存在消费空格 
					                           pre    保留空格与回车
											   normal 默认
					*/
				   whi te-space: nowrap;
				   whi te-space: pre;
				   white-space: normal;
				}
			
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：针对文本和字体，四种效果
		 ①控制字体：font-family\font-size\font-weight等
		 ②控制文本布局：text-align、line-height、letter-spacing等
		 ③文本装饰效果：text-decoration、text-shadow等
		 ④文本溢出和换行：overflow、white-space.
		 -->
		 <h1>文本格式化属性：控制字体</h1>
		 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero odio assumenda esse non mollitia? Eaque a pariatur, illo perspiciatis tempora rerum, sed neque quasi maxime voluptatum quis cum deserunt dolor.
	    <h1>控制文本布局：文本</h1>
	    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae aliquam tempora temporibus veritatis, ex, sint perspiciatis optio enim ipsam nulla animi exercitationem modi, porro officiis architecto reprehenderit provident deserunt. Quos.</p>
		<h1>文本装饰效果</h1>
		<p>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<span>测试文本阴影</span>
		</p>
		<h1>文本换行属性</h1>
		<span>Lore      
		m ipsum dolor sit amet consectetur, adipisicing elit. Minus obcaecati error asperiores id quasi quis cum non exercitationem earum nisi reiciendis eius sapiente minima, doloremque fuga nobis repellat. Necessitatibus, dolorem!</span>
	</body>
</html>